import { CustomTheme, useCustomTheme } from '@/context/ThemeContext';
import { View, Text } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { ArrowLeft } from '@taroify/icons';
import { useMemo } from 'react';

interface NavBarProps {
  height?: string;
  left?: React.ReactNode;
  title?: string | React.ReactNode;
  children?: React.ReactNode;
  align?: 'center' | 'start' | 'end';
  spread?: boolean;
}

function NavBar({
  height = '40px',
  left,
  title,
  children,
  align = 'center',
  spread = true,
}: NavBarProps) {
  const { theme } = useCustomTheme();
  const paddingTop = useMemo(
    () => Taro.getSystemInfoSync().statusBarHeight,
    [],
  );

  return (
    <View
      style={{
        paddingTop,
        backgroundColor: theme.baseColor,
      }}
      className="min-h-screen box-border"
    >
      <View className={`flex items-${align} mx-2`} style={{ height }}>
        {/* 这里左边空余 */}
        {spread && (
          <View className="min-w-20">
            {left ? (
              <View>{left}</View>
            ) : (
              <ArrowLeft onClick={() => Taro.navigateBack()} size={24} />
            )}
          </View>
        )}

        <View className="flex-grow flex justify-around items-center">
          {title}
        </View>
        <View className="w-20"></View>
      </View>
      <View
        className="overflow-y-auto"
        style={{
          height: `calc(100vh - ${height} - ${paddingTop}px)`,
        }}
      >
        {children}
      </View>
    </View>
  );
}

export default (a: NavBarProps) => (
  <CustomTheme>
    <NavBar {...a}></NavBar>
  </CustomTheme>
);
